<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
  <script type="text/javascript" src="swipper/swiper-3.4.2.min.js"></script>
  <link rel="stylesheet" href="swipper/swiper-3.4.2.min.css">
  <title>首页</title>
</head>

<body>
  <div class="header-wrapper">
    <div class="item active">
      <span>首页</span>
    </div>
    <div class="item">
      <span>NBA</span>

    </div>
    <div class="item">
      <span>评论</span>

    </div>
  </div>
  <div class="container">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <% for(var i=0;i<banners.length;i++){
                var banner = banners[i];
            %>
          <div class="swiper-slide">
            <img src="<%=banner.src%>" alt="">
            <div class="info">
              <h3><%=banner.title%></h3>
              <p>
                <%=banner.sub_title%>
              </p>
            </div>
          </div>
          <%}%>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 列表 -->
    <ul class="article-list">
      <% for(var i=0;i<articles.length;i++){
         var article = articles[i];
          %>
        <li>
          <a href="/article?aid=<%=article.aid%>" class="item">
                <img src="<%=article.avatar%>" alt="">
                <div class="info">
                  <h3><%=article.title%></h3>
                  <div class="desc">
                    <%=article.content%>
                  </div>
                </div>
            </a>
        </li>
        <%}%>
    </ul>
  </div>
  <div class="footer-wrapper">
    <div class="item">
      <span>首页</span>
    </div>
    <div class="item">
      <span>文章</span>

    </div>
    <div class="item">
      <span>我的</span>

    </div>
  </div>

  <script>
    var mySwiper = new Swiper('.swiper-container', {
      direction: 'horizontal',
      loop: true,
      // 如果需要分页器
      pagination: '.swiper-pagination',
    })
  </script>
</body>

</html>
